<template>
    <div>

      <div class="data">
        <div class="data-card">
          <!-- 用户总数 -->
          <el-card class="box-card">
            <div class="data-content">
              <div class="title">
                <span>用户总数</span>
                <i class="iconfont icon-zhixiang"></i>
              </div>
              <div class="quantity">1133</div>
              <div class="details">
                <span>相较于上一日上升<span class="people">4</span></span>
              </div>
            </div>
          </el-card>
          <!-- 涉疫风险人数 -->
          <el-card class="box-card">
            <div class="data-content">
              <div class="title">
                <span>涉疫风险人数</span>
                <i class="iconfont icon-zhixiang"></i>
              </div>
              <div class="quantity">105</div>
              <div class="details">
                <span>相较于上一日上升<span class="people">15</span></span>
              </div>
            </div>
            <div class="riskQuantity">
              <span>往返信息筛查风险人数：<span class="people">15</span></span>
              <span>健康信息筛查风险人数：<span class="people">30</span></span>
              <span>应急事件筛查风险人数：<span class="people">30</span></span>
              <span>涉疫场所筛查风险人数：<span class="people">30</span></span>
            </div>
          </el-card>
          <!-- 应急事件总数 -->
          <el-card class="box-card">
            <div class="data-content">
              <div class="title">
                <span>应急事件总数</span>
                <i class="iconfont icon-zhixiang"></i>
              </div>
              <div class="quantity">16</div>
              <div class="details">
                <span>相较于上一日上升<span class="people">1</span></span>
                <span>关联涉疫风险筛查人数<span class="people">30</span></span>
              </div>
            </div>
          </el-card>
        </div>

        <div class="data-card stretch">
          <el-card class="box-card">
            <div class="data-content">
              <div class="title">
                <span>往返信息申报数</span>
                <i class="iconfont icon-zhixiang"></i>
              </div>
              <div class="quantity">710</div>
              <div class="details">
                <span>已审核往返信息数 <span class="people">510</span></span>
                <span>已过期往返信息数 <span class="people">110342</span></span>
                <span>待审核往返信息数 <span class="people">200</span></span>
              </div>
            </div>
              <!-- 图表 -->
            <div class="chart-container">
              <div class="depart-chart">
                <div class="title">出发分布地</div>
                <depart-chart></depart-chart>
              </div>
              <div class="arrive-chart">
                <div class="title">到达分布地</div>
                <arrive-chart></arrive-chart>
              </div>
            </div>
          </el-card>
        </div>

        <div class="data-card stretch">
          <el-card class="box-card">
            <div class="data-content">
              <div class="title">
                <span>现有场所数量</span>
                <i class="iconfont icon-zhixiang"></i>
              </div>
              <div class="quantity">200</div>
              <div class="details">
                <span>相较于上一日上升 <span class="people">15</span></span>
              </div>
            </div>
              <!-- 图表 -->
            <div class="chart-container">
              <div class="dite-chart">
                <div class="title">最近两周高频访问场所</div>
                <site-chart></site-chart>
              </div>
            </div>
          </el-card>
        </div>

        <div class="data-card stretch">
          <el-card class="box-card">
            <div class="title">
              <span>我的待办工作</span>
              <i class="iconfont icon-zhixiang"></i>
            </div>
            <div class="matter">
              <div class="item">
                <a href="#"><span class="name">张三</span> <span class="site">XX市XX区-XX市XX区</span><span class="type">往返申报</span></a>
                <span class="time">2022/5/20</span>
              </div>
              <div class="item">
                <a href="#"><span class="name">李四</span> <span class="site">关于xx大厦紧急卫生事件</span><span class="type">填报</span></a>
                <span class="time">2022/5/20</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
</template>

<script>
import departChart from './components/departChart.vue';
import arriveChart from './components/arriveChart.vue';
import siteChart from './components/siteChart.vue';

export default {
  components: {
    departChart,
    arriveChart,
    siteChart,
  },
  name: '',
  data() {
    return {
    };
  },
  methods: {
  },
  created() {
    this.$emit('active', 'home');
  },
};
</script>

<style scoped>
.data {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px 10px;
}

.stretch {
  display: flex;
}

::v-deep .data-card .el-card__body {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 100%;
}

.box-card {
  width: 100%;
}

.box-card + .box-card {
  margin-top: 10px;
}

.title {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.title i {
  font-size: 18px;
}

.quantity {
  font-size: 26px;
}

.people {
  color: #5498ff!important;
}

.details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 40px;
  margin-top: 20px;
  font-size: 12px;
  color: #949494;
}

.riskQuantity {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding-top: 30px;
  border-top:1px solid #e8e6e6;
}

.riskQuantity span {
  margin-bottom: 30px;
  font-size: 12px;
  color: #949494;
}

.riskQuantity span:last-child {
  margin-bottom: 20px;
}

.chart-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 10px;
}

.depart-chart,
.arrive-chart {
  display: flex;
  flex-direction: column;
  height: 50%;
  border-top: 1px solid #e8e6e6;
  padding-top: 20px;
}

.chart {
  flex-grow: 1;
}

.dite-chart {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: 1px solid #e8e6e6;
  padding-top: 20px;
}

.matter .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid #e8e6e6;
}

.matter .item a {
  text-decoration: none;
  color: #2b85e4;
}

.matter .item .time {
  color: #949494;
}
</style>
